﻿<template>
  <div class="reset" ref="reset">
    <div class="reset_header">
      修改手机号码
      <img src="../../static/img/back_ccc.png" class="goback"/>
    </div>
    <div style="height:11.7vw;"></div>
     <p style="margin-top:8.8vw;font-size:3.2vw;text-align:center;margin-bottom:2.6vw;">
       当前绑定的手机号
     </p>  
     <p class="num_hsow">
       130 xxxx 2855
     </p>
     <div class="disinput_box">
      <span class="E1">+81</span><!--
       --><span class="el_b">&nbsp;</span><!--
       --><input type="text" name="name" value="" class="dis_Box_num"/>
     </div>

    <div class="disinput_box">
      <img src="../../static/img/get+mess_ss.png" alt="Alternate Text" class="El_img E1" /><!--
          --><span class="el_b">&nbsp;</span><!--
    --><input type="text" name="name" value="" class="dis_Box_num" />
    </div>

    <div class="dis_last_btn">
      确认提交
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"


export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () { 
   
  },
  methods: {
   
  },
  components: {
    
  }
}
</script>
<style>
  #app {
    background-color: #c6c6c6;
  }

</style>
<style scoped>
  /*reset_num*/
  .dis_last_btn {
    width: 86vw;
    height: 11.7vw;
    background-color: #de3939;
    color:#fff;
    text-align:center;
    line-height:11.7vw;
    border-radius:4vw;
    margin-top:1vw;
    margin:8vw auto 0;
  } 
  .disinput_box .El_img {
    width: 3.6vw;
    height: 5.4vw;
    vertical-align: middle;
    margin-right: 4vw;
    margin-left: 4vw;
  } 
  .el_b {
    width: 0.4vw;
    height: 4.2vw;
    background-color: #c6c6c6;
  } 
  .E1 {
    color: #898989;
    font-size: 4vw;
    margin-right:2vw;
    margin-left:2vw;
  } 
  .dis_Box_num {
    border: 0;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 74.4vw;
    border-radius:2vw;
  } 
  .disinput_box {
    width: 88vw;
    height: 11.7vw;
    line-height: 11.7vw;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 4vw;
    border-radius: 2vw;
  } 
  .num_hsow {
    font-size: 6.4vw;
  } 

/*reset_Num*/
  .last_b_btn {
    width: 52vw;
    height: 11.7vw;
    line-height: 11.7vw;
    color: #fff;
    background-color: #de3939;
    border-radius: 2vw;
    margin: 1.3vw auto;
  }
  .last_bottom {
    background-color: #eeeeee;
    height: 14vw;
    margin-top: 5vw;
  } 
  .min_list {
    position: relative;
    background-color: #4c4c4c;
  } 
  .bottom_list {
    margin-top: 2.9vw;
  }
  .img_go_To{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:5.3vw;
    width:2.6vw;
  } 
  .pad_le {
    margin-left: 8vw;
  } 
  .min_list {
    height: 10.4vw;
    line-height: 10.4vw;
    background-color: #eeeeee;
    border-bottom: 1px solid #c6c6c6;
    text-align: left;
    width: 100%;
    color: #4c4c4c;
  } 
  .wrap_list_all {
    background-color: #c6c6c6;
    width: 100%;
  } 
  .user_info_address {
    height: 13.3vw;
    border-radius: 0 0 2vw 2vw;
    background-color: #fff;
    display: block;
    resize: none;
    padding: 0;
    border: 0;
    width: 100%;
  } 
  .user_i_m {
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eee;
    width: 100%
  } 
  .user_info_m_h {
    color: #fff;
    background-color: #fea501;
    text-align: center;
    line-height: 6.4vw;
    height: 6.4vw;
    border-radius: 2vw 2vw 0 0;
    font-size: 4vw;
  }
  .user_info_mid {
    display: flex;
    background-color: #fff;
    height: 7.2vw;
    font-size: 3vw;
    color: #9f5c2f;
    font-size:3vw;
    justify-content:space-around;
    text-align:center;
    border-left: 1px solid #eeeeee;
    line-height: 7.2vw;
    border-bottom: 1px solid #eee;
  } 
  .user_info_mess_box {
    width: 60vw;
    margin-top: 5vw;
    margin-bottom: 4vw;
    margin-left: 7.8vw;
  } 
  .reset_header {
    height: 11.7vw;
    line-height: 11.7vw;
    background-color: #874920;
    color: #fff;
    position: fixed;
    font-size: 4vw;
    top:0;
    width:100%;
  }
  .goback{
    width:4.4vw;
    height:4.8vw;
    position:absolute;
    left:2.6vw;
    top:50%;
    transform:translateY(-50%)
  }
  .user_info {
    display: flex;
    height: 36.2vw;
    width: 100%;
    background-color: #9f5c2f;
  }
  .user_info_img{
    width:20.6vw;
    height:20.6vw;
    border-radius:50%;
    margin-left:7vw;
    margin-top:6.4vw;
  }
</style>